<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>IconFont Demo</title>
  <link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe63e;</span>
                <div class="name">resize</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">folder</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">放大</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6da;</span>
                <div class="name">note text</div>
                <div class="code-name">&amp;#xe6da;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">graph</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">folder</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">2</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">星标</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">load</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">图片</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61a;</span>
                <div class="name">1</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63c;</span>
                <div class="name">link</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe648;</span>
                <div class="name">min</div>
                <div class="code-name">&amp;#xe648;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61b;</span>
                <div class="name">load</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe645;</span>
                <div class="name">右缩进</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">缩小</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">三横</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71f;</span>
                <div class="name">符号-大纲树</div>
                <div class="code-name">&amp;#xe71f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe633;</span>
                <div class="name">del</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe59c;</span>
                <div class="name">tree-1</div>
                <div class="code-name">&amp;#xe59c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b0;</span>
                <div class="name">树木</div>
                <div class="code-name">&amp;#xe7b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">导出</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe531;</span>
                <div class="name">Align Right</div>
                <div class="code-name">&amp;#xe531;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
                <div class="name">Align Left</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe634;</span>
                <div class="name">样式</div>
                <div class="code-name">&amp;#xe634;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">article</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cd;</span>
                <div class="name">1</div>
                <div class="code-name">&amp;#xe6cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75b;</span>
                <div class="name">滑动双箭头</div>
                <div class="code-name">&amp;#xe75b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f9;</span>
                <div class="name">Related</div>
                <div class="code-name">&amp;#xe6f9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61c;</span>
                <div class="name">export</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">date</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76a;</span>
                <div class="name">newline</div>
                <div class="code-name">&amp;#xe76a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">左缩进</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe666;</span>
                <div class="name">加粗</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67e;</span>
                <div class="name">file</div>
                <div class="code-name">&amp;#xe67e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe753;</span>
                <div class="name">folder open </div>
                <div class="code-name">&amp;#xe753;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe52a;</span>
                <div class="name">link</div>
                <div class="code-name">&amp;#xe52a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">color</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe686;</span>
                <div class="name">导入</div>
                <div class="code-name">&amp;#xe686;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe656;</span>
                <div class="name">tree</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ad;</span>
                <div class="name">高亮</div>
                <div class="code-name">&amp;#xe6ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe626;</span>
                <div class="name">align-center</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe5d9;</span>
                <div class="name">重命名</div>
                <div class="code-name">&amp;#xe5d9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d2;</span>
                <div class="name">min</div>
                <div class="code-name">&amp;#xe6d2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b8;</span>
                <div class="name">矩形</div>
                <div class="code-name">&amp;#xe6b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">收缩</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cb;</span>
                <div class="name">加号</div>
                <div class="code-name">&amp;#xe6cb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe98d;</span>
                <div class="name">word</div>
                <div class="code-name">&amp;#xe98d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">close</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">拖动</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe504;</span>
                <div class="name">hide</div>
                <div class="code-name">&amp;#xe504;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61d;</span>
                <div class="name">删除线</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe618;</span>
                <div class="name">蜜蜂</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6be;</span>
                <div class="name">返 回</div>
                <div class="code-name">&amp;#xe6be;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe50a;</span>
                <div class="name">save</div>
                <div class="code-name">&amp;#xe50a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">16_move to</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe717;</span>
                <div class="name">标星</div>
                <div class="code-name">&amp;#xe717;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe701;</span>
                <div class="name">PNG</div>
                <div class="code-name">&amp;#xe701;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65b;</span>
                <div class="name">居中</div>
                <div class="code-name">&amp;#xe65b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe638;</span>
                <div class="name">返 回</div>
                <div class="code-name">&amp;#xe638;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe647;</span>
                <div class="name">Setup</div>
                <div class="code-name">&amp;#xe647;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe52b;</span>
                <div class="name">search</div>
                <div class="code-name">&amp;#xe52b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63d;</span>
                <div class="name">article</div>
                <div class="code-name">&amp;#xe63d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">后退</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">前进</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63f;</span>
                <div class="name">三点</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">打开</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe509;</span>
                <div class="name">展 开</div>
                <div class="code-name">&amp;#xe509;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe5ab;</span>
                <div class="name">list</div>
                <div class="code-name">&amp;#xe5ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65f;</span>
                <div class="name">max-two</div>
                <div class="code-name">&amp;#xe65f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe650;</span>
                <div class="name">倾斜</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76b;</span>
                <div class="name">tree edit</div>
                <div class="code-name">&amp;#xe76b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe502;</span>
                <div class="name">思维导图</div>
                <div class="code-name">&amp;#xe502;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">下划线</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a8;</span>
                <div class="name">树木</div>
                <div class="code-name">&amp;#xe7a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe729;</span>
                <div class="name">操作</div>
                <div class="code-name">&amp;#xe729;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c5;</span>
                <div class="name">note</div>
                <div class="code-name">&amp;#xe6c5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ce;</span>
                <div class="name">未开始</div>
                <div class="code-name">&amp;#xe6ce;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9a6;</span>
                <div class="name">PDF</div>
                <div class="code-name">&amp;#xe9a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe619;</span>
                <div class="name">缩进</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe662;</span>
                <div class="name">清除格式</div>
                <div class="code-name">&amp;#xe662;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">file</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c7;</span>
                <div class="name">tree</div>
                <div class="code-name">&amp;#xe6c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">local file</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe678;</span>
                <div class="name">完成</div>
                <div class="code-name">&amp;#xe678;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68b;</span>
                <div class="name">close</div>
                <div class="code-name">&amp;#xe68b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe635;</span>
                <div class="name">增加缩进</div>
                <div class="code-name">&amp;#xe635;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe651;</span>
                <div class="name">减小缩进</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe505;</span>
                <div class="name">退出</div>
                <div class="code-name">&amp;#xe505;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67a;</span>
                <div class="name">删 除</div>
                <div class="code-name">&amp;#xe67a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe537;</span>
                <div class="name">关于</div>
                <div class="code-name">&amp;#xe537;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c0;</span>
                <div class="name">share</div>
                <div class="code-name">&amp;#xe6c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe636;</span>
                <div class="name">激活</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61f;</span>
                <div class="name">右关闭</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">color</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-resize"></span>
            <div class="name">
              resize
            </div>
            <div class="code-name">.icon-resize
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-folder"></span>
            <div class="name">
              folder
            </div>
            <div class="code-name">.icon-folder
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fangda"></span>
            <div class="name">
              放大
            </div>
            <div class="code-name">.icon-fangda
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-notetext"></span>
            <div class="name">
              note text
            </div>
            <div class="code-name">.icon-notetext
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-graph"></span>
            <div class="name">
              graph
            </div>
            <div class="code-name">.icon-graph
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-folder1"></span>
            <div class="name">
              folder
            </div>
            <div class="code-name">.icon-folder1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-2"></span>
            <div class="name">
              2
            </div>
            <div class="code-name">.icon-2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xingbiao"></span>
            <div class="name">
              星标
            </div>
            <div class="code-name">.icon-xingbiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-load"></span>
            <div class="name">
              load
            </div>
            <div class="code-name">.icon-load
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tupian"></span>
            <div class="name">
              图片
            </div>
            <div class="code-name">.icon-tupian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test"></span>
            <div class="name">
              1
            </div>
            <div class="code-name">.icon-icon-test
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-link"></span>
            <div class="name">
              link
            </div>
            <div class="code-name">.icon-link
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-min"></span>
            <div class="name">
              min
            </div>
            <div class="code-name">.icon-min
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-load1"></span>
            <div class="name">
              load
            </div>
            <div class="code-name">.icon-load1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yousuojin"></span>
            <div class="name">
              右缩进
            </div>
            <div class="code-name">.icon-yousuojin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-suoxiao"></span>
            <div class="name">
              缩小
            </div>
            <div class="code-name">.icon-suoxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sanheng"></span>
            <div class="name">
              三横
            </div>
            <div class="code-name">.icon-sanheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fuhao-dagangshu"></span>
            <div class="name">
              符号-大纲树
            </div>
            <div class="code-name">.icon-fuhao-dagangshu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-del"></span>
            <div class="name">
              del
            </div>
            <div class="code-name">.icon-del
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tree-"></span>
            <div class="name">
              tree-1
            </div>
            <div class="code-name">.icon-tree-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shumu"></span>
            <div class="name">
              树木
            </div>
            <div class="code-name">.icon-shumu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daochu"></span>
            <div class="name">
              导出
            </div>
            <div class="code-name">.icon-daochu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-AlignRight"></span>
            <div class="name">
              Align Right
            </div>
            <div class="code-name">.icon-AlignRight
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-AlignLeft"></span>
            <div class="name">
              Align Left
            </div>
            <div class="code-name">.icon-AlignLeft
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yangshi"></span>
            <div class="name">
              样式
            </div>
            <div class="code-name">.icon-yangshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenzhang"></span>
            <div class="name">
              article
            </div>
            <div class="code-name">.icon-wenzhang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test1"></span>
            <div class="name">
              1
            </div>
            <div class="code-name">.icon-icon-test1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huadongshuangjiantou"></span>
            <div class="name">
              滑动双箭头
            </div>
            <div class="code-name">.icon-huadongshuangjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Related"></span>
            <div class="name">
              Related
            </div>
            <div class="code-name">.icon-Related
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-export"></span>
            <div class="name">
              export
            </div>
            <div class="code-name">.icon-export
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-date"></span>
            <div class="name">
              date
            </div>
            <div class="code-name">.icon-date
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-newline"></span>
            <div class="name">
              newline
            </div>
            <div class="code-name">.icon-newline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zuosuojin"></span>
            <div class="name">
              左缩进
            </div>
            <div class="code-name">.icon-zuosuojin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiacu"></span>
            <div class="name">
              加粗
            </div>
            <div class="code-name">.icon-jiacu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-file"></span>
            <div class="name">
              file
            </div>
            <div class="code-name">.icon-file
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-folderopen"></span>
            <div class="name">
              folder open 
            </div>
            <div class="code-name">.icon-folderopen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-link1"></span>
            <div class="name">
              link
            </div>
            <div class="code-name">.icon-link1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-color"></span>
            <div class="name">
              color
            </div>
            <div class="code-name">.icon-color
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daoru"></span>
            <div class="name">
              导入
            </div>
            <div class="code-name">.icon-daoru
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zuzhijiagou"></span>
            <div class="name">
              tree
            </div>
            <div class="code-name">.icon-zuzhijiagou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gaoliang"></span>
            <div class="name">
              高亮
            </div>
            <div class="code-name">.icon-gaoliang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-juzhongduiqi"></span>
            <div class="name">
              align-center
            </div>
            <div class="code-name">.icon-juzhongduiqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhongmingming"></span>
            <div class="name">
              重命名
            </div>
            <div class="code-name">.icon-zhongmingming
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-min1"></span>
            <div class="name">
              min
            </div>
            <div class="code-name">.icon-min1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-juxing"></span>
            <div class="name">
              矩形
            </div>
            <div class="code-name">.icon-juxing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shousuo"></span>
            <div class="name">
              收缩
            </div>
            <div class="code-name">.icon-shousuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiahao"></span>
            <div class="name">
              加号
            </div>
            <div class="code-name">.icon-jiahao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-word"></span>
            <div class="name">
              word
            </div>
            <div class="code-name">.icon-word
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baseline-close-px"></span>
            <div class="name">
              close
            </div>
            <div class="code-name">.icon-baseline-close-px
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tuodong"></span>
            <div class="name">
              拖动
            </div>
            <div class="code-name">.icon-tuodong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hide"></span>
            <div class="name">
              hide
            </div>
            <div class="code-name">.icon-hide
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanchuxian"></span>
            <div class="name">
              删除线
            </div>
            <div class="code-name">.icon-shanchuxian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mifeng"></span>
            <div class="name">
              蜜蜂
            </div>
            <div class="code-name">.icon-mifeng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fanhui"></span>
            <div class="name">
              返 回
            </div>
            <div class="code-name">.icon-fanhui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-save"></span>
            <div class="name">
              save
            </div>
            <div class="code-name">.icon-save
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-_moveto"></span>
            <div class="name">
              16_move to
            </div>
            <div class="code-name">.icon-_moveto
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaoxingPC-"></span>
            <div class="name">
              标星
            </div>
            <div class="code-name">.icon-biaoxingPC-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-PNG"></span>
            <div class="name">
              PNG
            </div>
            <div class="code-name">.icon-PNG
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-juzhong"></span>
            <div class="name">
              居中
            </div>
            <div class="code-name">.icon-juzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fanhui1"></span>
            <div class="name">
              返 回
            </div>
            <div class="code-name">.icon-fanhui1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Setup"></span>
            <div class="name">
              Setup
            </div>
            <div class="code-name">.icon-Setup
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-search"></span>
            <div class="name">
              search
            </div>
            <div class="code-name">.icon-search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-article"></span>
            <div class="name">
              article
            </div>
            <div class="code-name">.icon-article
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-houtui"></span>
            <div class="name">
              后退
            </div>
            <div class="code-name">.icon-houtui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qianjin"></span>
            <div class="name">
              前进
            </div>
            <div class="code-name">.icon-qianjin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sandian"></span>
            <div class="name">
              三点
            </div>
            <div class="code-name">.icon-sandian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dakai"></span>
            <div class="name">
              打开
            </div>
            <div class="code-name">.icon-dakai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhankai"></span>
            <div class="name">
              展 开
            </div>
            <div class="code-name">.icon-zhankai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-list"></span>
            <div class="name">
              list
            </div>
            <div class="code-name">.icon-list
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-max-two"></span>
            <div class="name">
              max-two
            </div>
            <div class="code-name">.icon-max-two
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qingxie"></span>
            <div class="name">
              倾斜
            </div>
            <div class="code-name">.icon-qingxie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-treeedit"></span>
            <div class="name">
              tree edit
            </div>
            <div class="code-name">.icon-treeedit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-luojituboth"></span>
            <div class="name">
              思维导图
            </div>
            <div class="code-name">.icon-luojituboth
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiahuaxian"></span>
            <div class="name">
              下划线
            </div>
            <div class="code-name">.icon-xiahuaxian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shumu1"></span>
            <div class="name">
              树木
            </div>
            <div class="code-name">.icon-shumu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caozuo"></span>
            <div class="name">
              操作
            </div>
            <div class="code-name">.icon-caozuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-note"></span>
            <div class="name">
              note
            </div>
            <div class="code-name">.icon-note
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weikaishi"></span>
            <div class="name">
              未开始
            </div>
            <div class="code-name">.icon-weikaishi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-PDF"></span>
            <div class="name">
              PDF
            </div>
            <div class="code-name">.icon-PDF
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-suojin"></span>
            <div class="name">
              缩进
            </div>
            <div class="code-name">.icon-suojin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qingchugeshi"></span>
            <div class="name">
              清除格式
            </div>
            <div class="code-name">.icon-qingchugeshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-file1"></span>
            <div class="name">
              file
            </div>
            <div class="code-name">.icon-file1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tree"></span>
            <div class="name">
              tree
            </div>
            <div class="code-name">.icon-tree
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-folderopen1"></span>
            <div class="name">
              local file
            </div>
            <div class="code-name">.icon-folderopen1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wancheng"></span>
            <div class="name">
              完成
            </div>
            <div class="code-name">.icon-wancheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-searchclose"></span>
            <div class="name">
              close
            </div>
            <div class="code-name">.icon-searchclose
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zengjiasuojin"></span>
            <div class="name">
              增加缩进
            </div>
            <div class="code-name">.icon-zengjiasuojin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jianxiaosuojin"></span>
            <div class="name">
              减小缩进
            </div>
            <div class="code-name">.icon-jianxiaosuojin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-power"></span>
            <div class="name">
              退出
            </div>
            <div class="code-name">.icon-power
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanchu"></span>
            <div class="name">
              删 除
            </div>
            <div class="code-name">.icon-shanchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-iconset0103"></span>
            <div class="name">
              关于
            </div>
            <div class="code-name">.icon-iconset0103
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-share"></span>
            <div class="name">
              share
            </div>
            <div class="code-name">.icon-share
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jihuo"></span>
            <div class="name">
              激活
            </div>
            <div class="code-name">.icon-jihuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tubiao-gongjuxiang-55"></span>
            <div class="name">
              右关闭
            </div>
            <div class="code-name">.icon-tubiao-gongjuxiang-55
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-color1"></span>
            <div class="name">
              color
            </div>
            <div class="code-name">.icon-color1
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-resize"></use>
                </svg>
                <div class="name">resize</div>
                <div class="code-name">#icon-resize</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-folder"></use>
                </svg>
                <div class="name">folder</div>
                <div class="code-name">#icon-folder</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fangda"></use>
                </svg>
                <div class="name">放大</div>
                <div class="code-name">#icon-fangda</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-notetext"></use>
                </svg>
                <div class="name">note text</div>
                <div class="code-name">#icon-notetext</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-graph"></use>
                </svg>
                <div class="name">graph</div>
                <div class="code-name">#icon-graph</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-folder1"></use>
                </svg>
                <div class="name">folder</div>
                <div class="code-name">#icon-folder1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-2"></use>
                </svg>
                <div class="name">2</div>
                <div class="code-name">#icon-2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xingbiao"></use>
                </svg>
                <div class="name">星标</div>
                <div class="code-name">#icon-xingbiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-load"></use>
                </svg>
                <div class="name">load</div>
                <div class="code-name">#icon-load</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tupian"></use>
                </svg>
                <div class="name">图片</div>
                <div class="code-name">#icon-tupian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test"></use>
                </svg>
                <div class="name">1</div>
                <div class="code-name">#icon-icon-test</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-link"></use>
                </svg>
                <div class="name">link</div>
                <div class="code-name">#icon-link</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-min"></use>
                </svg>
                <div class="name">min</div>
                <div class="code-name">#icon-min</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-load1"></use>
                </svg>
                <div class="name">load</div>
                <div class="code-name">#icon-load1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yousuojin"></use>
                </svg>
                <div class="name">右缩进</div>
                <div class="code-name">#icon-yousuojin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-suoxiao"></use>
                </svg>
                <div class="name">缩小</div>
                <div class="code-name">#icon-suoxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sanheng"></use>
                </svg>
                <div class="name">三横</div>
                <div class="code-name">#icon-sanheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fuhao-dagangshu"></use>
                </svg>
                <div class="name">符号-大纲树</div>
                <div class="code-name">#icon-fuhao-dagangshu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-del"></use>
                </svg>
                <div class="name">del</div>
                <div class="code-name">#icon-del</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tree-"></use>
                </svg>
                <div class="name">tree-1</div>
                <div class="code-name">#icon-tree-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shumu"></use>
                </svg>
                <div class="name">树木</div>
                <div class="code-name">#icon-shumu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daochu"></use>
                </svg>
                <div class="name">导出</div>
                <div class="code-name">#icon-daochu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-AlignRight"></use>
                </svg>
                <div class="name">Align Right</div>
                <div class="code-name">#icon-AlignRight</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-AlignLeft"></use>
                </svg>
                <div class="name">Align Left</div>
                <div class="code-name">#icon-AlignLeft</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yangshi"></use>
                </svg>
                <div class="name">样式</div>
                <div class="code-name">#icon-yangshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenzhang"></use>
                </svg>
                <div class="name">article</div>
                <div class="code-name">#icon-wenzhang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test1"></use>
                </svg>
                <div class="name">1</div>
                <div class="code-name">#icon-icon-test1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huadongshuangjiantou"></use>
                </svg>
                <div class="name">滑动双箭头</div>
                <div class="code-name">#icon-huadongshuangjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Related"></use>
                </svg>
                <div class="name">Related</div>
                <div class="code-name">#icon-Related</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-export"></use>
                </svg>
                <div class="name">export</div>
                <div class="code-name">#icon-export</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-date"></use>
                </svg>
                <div class="name">date</div>
                <div class="code-name">#icon-date</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-newline"></use>
                </svg>
                <div class="name">newline</div>
                <div class="code-name">#icon-newline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zuosuojin"></use>
                </svg>
                <div class="name">左缩进</div>
                <div class="code-name">#icon-zuosuojin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiacu"></use>
                </svg>
                <div class="name">加粗</div>
                <div class="code-name">#icon-jiacu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-file"></use>
                </svg>
                <div class="name">file</div>
                <div class="code-name">#icon-file</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-folderopen"></use>
                </svg>
                <div class="name">folder open </div>
                <div class="code-name">#icon-folderopen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-link1"></use>
                </svg>
                <div class="name">link</div>
                <div class="code-name">#icon-link1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-color"></use>
                </svg>
                <div class="name">color</div>
                <div class="code-name">#icon-color</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daoru"></use>
                </svg>
                <div class="name">导入</div>
                <div class="code-name">#icon-daoru</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zuzhijiagou"></use>
                </svg>
                <div class="name">tree</div>
                <div class="code-name">#icon-zuzhijiagou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gaoliang"></use>
                </svg>
                <div class="name">高亮</div>
                <div class="code-name">#icon-gaoliang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-juzhongduiqi"></use>
                </svg>
                <div class="name">align-center</div>
                <div class="code-name">#icon-juzhongduiqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhongmingming"></use>
                </svg>
                <div class="name">重命名</div>
                <div class="code-name">#icon-zhongmingming</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-min1"></use>
                </svg>
                <div class="name">min</div>
                <div class="code-name">#icon-min1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-juxing"></use>
                </svg>
                <div class="name">矩形</div>
                <div class="code-name">#icon-juxing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shousuo"></use>
                </svg>
                <div class="name">收缩</div>
                <div class="code-name">#icon-shousuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiahao"></use>
                </svg>
                <div class="name">加号</div>
                <div class="code-name">#icon-jiahao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-word"></use>
                </svg>
                <div class="name">word</div>
                <div class="code-name">#icon-word</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baseline-close-px"></use>
                </svg>
                <div class="name">close</div>
                <div class="code-name">#icon-baseline-close-px</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tuodong"></use>
                </svg>
                <div class="name">拖动</div>
                <div class="code-name">#icon-tuodong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hide"></use>
                </svg>
                <div class="name">hide</div>
                <div class="code-name">#icon-hide</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchuxian"></use>
                </svg>
                <div class="name">删除线</div>
                <div class="code-name">#icon-shanchuxian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mifeng"></use>
                </svg>
                <div class="name">蜜蜂</div>
                <div class="code-name">#icon-mifeng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fanhui"></use>
                </svg>
                <div class="name">返 回</div>
                <div class="code-name">#icon-fanhui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-save"></use>
                </svg>
                <div class="name">save</div>
                <div class="code-name">#icon-save</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-_moveto"></use>
                </svg>
                <div class="name">16_move to</div>
                <div class="code-name">#icon-_moveto</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoxingPC-"></use>
                </svg>
                <div class="name">标星</div>
                <div class="code-name">#icon-biaoxingPC-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-PNG"></use>
                </svg>
                <div class="name">PNG</div>
                <div class="code-name">#icon-PNG</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-juzhong"></use>
                </svg>
                <div class="name">居中</div>
                <div class="code-name">#icon-juzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fanhui1"></use>
                </svg>
                <div class="name">返 回</div>
                <div class="code-name">#icon-fanhui1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Setup"></use>
                </svg>
                <div class="name">Setup</div>
                <div class="code-name">#icon-Setup</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-search"></use>
                </svg>
                <div class="name">search</div>
                <div class="code-name">#icon-search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-article"></use>
                </svg>
                <div class="name">article</div>
                <div class="code-name">#icon-article</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-houtui"></use>
                </svg>
                <div class="name">后退</div>
                <div class="code-name">#icon-houtui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qianjin"></use>
                </svg>
                <div class="name">前进</div>
                <div class="code-name">#icon-qianjin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sandian"></use>
                </svg>
                <div class="name">三点</div>
                <div class="code-name">#icon-sandian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dakai"></use>
                </svg>
                <div class="name">打开</div>
                <div class="code-name">#icon-dakai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhankai"></use>
                </svg>
                <div class="name">展 开</div>
                <div class="code-name">#icon-zhankai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-list"></use>
                </svg>
                <div class="name">list</div>
                <div class="code-name">#icon-list</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-max-two"></use>
                </svg>
                <div class="name">max-two</div>
                <div class="code-name">#icon-max-two</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qingxie"></use>
                </svg>
                <div class="name">倾斜</div>
                <div class="code-name">#icon-qingxie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-treeedit"></use>
                </svg>
                <div class="name">tree edit</div>
                <div class="code-name">#icon-treeedit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-luojituboth"></use>
                </svg>
                <div class="name">思维导图</div>
                <div class="code-name">#icon-luojituboth</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiahuaxian"></use>
                </svg>
                <div class="name">下划线</div>
                <div class="code-name">#icon-xiahuaxian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shumu1"></use>
                </svg>
                <div class="name">树木</div>
                <div class="code-name">#icon-shumu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caozuo"></use>
                </svg>
                <div class="name">操作</div>
                <div class="code-name">#icon-caozuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-note"></use>
                </svg>
                <div class="name">note</div>
                <div class="code-name">#icon-note</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weikaishi"></use>
                </svg>
                <div class="name">未开始</div>
                <div class="code-name">#icon-weikaishi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-PDF"></use>
                </svg>
                <div class="name">PDF</div>
                <div class="code-name">#icon-PDF</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-suojin"></use>
                </svg>
                <div class="name">缩进</div>
                <div class="code-name">#icon-suojin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qingchugeshi"></use>
                </svg>
                <div class="name">清除格式</div>
                <div class="code-name">#icon-qingchugeshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-file1"></use>
                </svg>
                <div class="name">file</div>
                <div class="code-name">#icon-file1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tree"></use>
                </svg>
                <div class="name">tree</div>
                <div class="code-name">#icon-tree</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-folderopen1"></use>
                </svg>
                <div class="name">local file</div>
                <div class="code-name">#icon-folderopen1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wancheng"></use>
                </svg>
                <div class="name">完成</div>
                <div class="code-name">#icon-wancheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-searchclose"></use>
                </svg>
                <div class="name">close</div>
                <div class="code-name">#icon-searchclose</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zengjiasuojin"></use>
                </svg>
                <div class="name">增加缩进</div>
                <div class="code-name">#icon-zengjiasuojin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jianxiaosuojin"></use>
                </svg>
                <div class="name">减小缩进</div>
                <div class="code-name">#icon-jianxiaosuojin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-power"></use>
                </svg>
                <div class="name">退出</div>
                <div class="code-name">#icon-power</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchu"></use>
                </svg>
                <div class="name">删 除</div>
                <div class="code-name">#icon-shanchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iconset0103"></use>
                </svg>
                <div class="name">关于</div>
                <div class="code-name">#icon-iconset0103</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-share"></use>
                </svg>
                <div class="name">share</div>
                <div class="code-name">#icon-share</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jihuo"></use>
                </svg>
                <div class="name">激活</div>
                <div class="code-name">#icon-jihuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tubiao-gongjuxiang-55"></use>
                </svg>
                <div class="name">右关闭</div>
                <div class="code-name">#icon-tubiao-gongjuxiang-55</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-color1"></use>
                </svg>
                <div class="name">color</div>
                <div class="code-name">#icon-color1</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
